<template>
  <a-modal
      okText="登录"
      title="欢迎登录"
      cancelText="取消"
      :centered="true"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handlerLogin"
      @cancel="handlerCancel"
  >
    <div class="form-box">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
        <a-form-item label="账号">
          <a-input v-model="formData.userName" v-focus placeholder="请输入账号"/>
        </a-form-item>

        <a-form-item label="密码">
          <a-input-password v-model="formData.password" v-focus placeholder="请输入密码"/>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
export default {
  props: ["visible"],
  data() {
    return {
      confirmLoading: false,
      formData: {
        userName: "",
        password: "",
      },
    };
  },
  methods: {
    handlerLogin() {
      this.confirmLoading = true;
      this.$http("/user/login", this.formData, "post").then((res) => {
        if (res.code) {
          let userInfo = res.data.user,
              links = res.data.links ? JSON.parse(res.data.links) : null;
          delete userInfo["password"];
          this.$store.commit("userInfo", userInfo);

          this.$store.commit("links", links);
          this.$store.commit("hasLogin", true);

          this.$storage.set("userInfo", userInfo);
          this.$storage.set(userInfo.userName + "_token", res.data.token);
          this.$storage.set(userInfo.userName + "_links", links);
          this.$message.success(res.msg);
          this.$emit("close");
        } else {
          this.$message.error(res.msg);
        }

        this.confirmLoading = false;
      });
    },
    handlerCancel() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="less">

</style>
